// 循环遍历将poker图片添加到数组中
var pokersList = [];
var flower = 0;
for(var i = 1; i <= 52; i++) {
	var poker = new Image();
	poker.src = "img/01.png";
	poker.setAttribute("data-i", i - flower * 13); //保存扑克的值
	poker.setAttribute("data-flower", flower); //保存扑克的花色
	poker.setAttribute("data-src", "img/" + i + ".jpg");
	poker.ondragstart = function(event) {
		return false;
	};
	pokersList.push(poker);
	if(i % 13 == 0) {
		flower++
	}
}

console.log(pokersList);

//随机生成长度为52的数组 保存下标,0~51;
var pokerObjI = [];
for(var i = 0; pokerObjI.length < 52; i++) {
	var num = Math.floor(Math.random() * 52);
	var isRepeat = false;
	for(var item of pokerObjI) {
		if(item == num) {
			isRepeat = true;
		}
	}
	if(!isRepeat) {
		pokerObjI.push(num);
	}
}

// -----------------向所有牌堆中添加扑克-----------------
// 创建全局变量 pokerNum 来保存以添加过的最后一个下标
var pokerNum = 0;
// 获取牌堆对象
var allPoker = document.getElementById('allPoker').children[0];
// 向牌堆中插入24张扑克
for(var i = 0; i < 24; i++) {
	allPoker.appendChild(pokersList[pokerObjI[i]]);
	pokerNum++; //同时样poker的下标增加
}
// 向下方7个牌堆中分别保存 1,2,3,4,5,6,7张扑克(共28张)
// 获取7个牌堆对象
var sevenObj = document.getElementById('sevenPokers').children;
// console.log(sevenObj)
// 循环向牌堆中添加扑克
for(var i = 0; i < 7; i++) {
	for(var j = i; j < 7; j++) {
		var obj = pokersList[pokerObjI[pokerNum]];
		if(j === i) {
			obj.src = obj.getAttribute("data-src");
			obj.removeAttribute("data-src")
		}
		obj.style.top = i * 30 + "px";
		sevenObj[j].appendChild(obj);
		pokerNum++;
	}
}

// 判断7个牌堆中如果有最后一个扑克均为背面,则让最后一个变为正面,
// 如果最后一个为正面,则什么都不改变
function changeClass() {
	for(var item of sevenObj) {
		var lastItem = item.children[item.children.length - 1];
		var penultimate = item.children[item.children.length - 2];
		if(item.children.length > 0) {
			if(penultimate == undefined) {
				if(lastItem.dataset.src != null) {
					console.log(lastItem);
					console.log(lastItem.src);
					console.log(lastItem.dataset.src);
					lastItem.src = lastItem.dataset.src;
				}
			} else if(penultimate.src == lastItem.src) {
				// 如果倒数第二个扑克和倒数第一个扑克src相等,让最后一个变为正面
				lastItem.src = lastItem.dataset.src;
			}
		}
	}
}

// 给扑克添加上外边距 让他们分开
function addMarginTop() {
	for(var item of sevenObj) {
		var items = item.children;
		for(var i of items) {
			i.removeAttribute("style");
		}
		if(items.length > 1) {
			for(var i = 1; i < items.length; i++) {
				items[i].style.marginTop = i * 30 + "px";
			}
		}
	}
}

//addMarginTop();

// ----------在所有扑克分发结束后绑定事件----------

//为牌堆中poker绑定点击事件 [点击显示一张，全部显示完后再次点击让所有牌回到牌堆]
// 1.获取到所有牌堆中的扑克
var AllpokerObj = allPoker.getElementsByTagName('img');
// 2.获取牌堆展示的div
var AllpokerDiv = allPoker.nextElementSibling;
// 创建变量保存被拖动的扑克和展示区域当前已添加的扑克数
var thisPoker, pakerListNum;
// 创建变量保存当前被拖动扑克的花色和值
var thisI, thisFlower;
// 创建变量保存当前被拖动的列表  若列表length===1，则按原先的处理，若>1,则联动
var thisList = [];
// 为牌堆添加点击事件
allPoker.onclick = function() {
	// 将展示区域的所有扑克保存在list中
	var pokerList = AllpokerDiv.getElementsByTagName('img');
	// 创建变量保存展示区域扑克个数
	pakerListNum = pokerList.length;
	// console.log(pokerList);
	if(AllpokerObj.length > 0) {
		AllpokerDiv.appendChild(AllpokerObj[AllpokerObj.length - 1]); //将最后一张扑克(最上方的),移动到展示区域
		var obj = pokerList[pokerList.length - 1];
		obj.src = obj.getAttribute("data-src");
		obj.removeAttribute("data-src");
	} else {
		for(var i = pakerListNum - 1; i >= 0; i--) {
			allPoker.appendChild(pokerList[i]); //循环遍历将展示区域扑克添加到牌堆中
			var obj = AllpokerObj[AllpokerObj.length - 1];
			obj.setAttribute("data-src", obj.src);
			obj.src = "img/01.png";
		}
	}
	// console.log(pakerListNum);

	// 为牌堆展示框中所有扑克绑定拖动事件  写在点击事件里,每次点击都更新
	// 创建变量保存鼠标位置
	var left, top;
	for(item of pokerList) {
		item.ondragstart = function(e) {
			console.log("拖动开始")
			thisPoker = this;
			thisI = this.dataset.i;
			thisFlower = this.dataset.flower;
			//保存当前鼠标在扑克上的位置
			left = e.clientX - this.offsetLeft;
			top = e.clientY - this.offsetTop;
		}
		item.ondrag = function(e) {
			// console.log("拖动ing~")
			// 设置当前扑克的位置
			//this.style.position = "fixed"
			this.style.top = e.clientY - top + "px";
			this.style.left = e.clientX - left + "px";
		}
		item.ondragend = function() {
			console.log("拖动结束")
			// 移除之前添加的样式
			this.removeAttribute("style")
		}
	}
}
// 为7个牌堆的最后一个扑克添加拖动事件
function addDrag() {
	for(var item of sevenObj) {
		var list = item.children[item.children.length - 1];
		var left, top, style;
		if(list) {
			list.ondragstart = function(e) {
				console.log("拖动开始")
				thisPoker = this;
				thisI = this.dataset.i;
				thisFlower = this.dataset.flower;
				style = this.style;
				thisList = [];
				var obj = this.nextElementSibling;
				while(obj) {
					thisList.push(obj);
					obj = obj.nextElementSibling;
				}
				//保存当前鼠标在扑克上的位置
			}
			list.ondrag = function(e) {
				// 设置当前扑克的位置
			}
			list.ondragend = function() {
				console.log("拖动结束")
				// 移除之前添加的样式
			}
		}

	}
}
addDrag();
// 为4个牌堆添加拖动释放事件
// 获取4个牌堆
var fourPokers = document.getElementById('fourPokers').children;
for(var item of fourPokers) {
	item.ondragenter = function() {
		console.log("拖动进入")
	}
	item.ondragover = function(e) {
		e.preventDefault();
		console.log("拖动悬停")
	}
	item.ondragleave = function() {
		console.log("拖动离开")
	}
	item.ondrop = function() {
		console.log(this.children.length)
		// 当本牌堆里没有扑克时,只可放入A,即thisI为1的扑克
		if(this.children.length == 0) {
			// 判断当前拖动的扑克的值不等于1则停止运行 return
			if(thisI != 1) {
				console.log("只可放入A");
				return;
			}
		} else { // 当牌堆中有扑克时,先判断当前拖动扑克的值和花色,如果与牌堆中的花色不同and值不大于最后一个扑克1时,停止运行
			// 获取当前牌堆的data-i和data-flower
			var itemI = parseInt(this.dataset.i);
			var itemFlower = this.dataset.flower;
			if(thisFlower != itemFlower || (thisI - itemI) != 1) {
				console.log("仅可放入同花色且值仅能比当前值大1")
				return;
			}
		}

		console.log("拖动释放")
		console.log(thisPoker);
		console.log(thisI);
		console.log(thisFlower);
		console.log(this);
		this.appendChild(thisPoker);
		this.setAttribute("data-i", thisI);
		this.setAttribute("data-flower", thisFlower);
		this.children[this.children.length - 1].removeAttribute("style");
		addDrag();
		changeClass();
	}
}

// 为下方7个牌堆添加拖动释放事件
for(var item of sevenObj) {
	item.ondragenter = function() {
		console.log("拖动进入")
	}
	item.ondragover = function(e) {
		e.preventDefault();
		console.log("拖动悬停")
	}
	item.ondragleave = function() {
		console.log("拖动离开")
	}
	item.ondrop = function() {
		console.log(this.children.length)
		if(this.children.length == 0) {
			// 当本牌堆里没有扑克时,只可放入K,即thisI为13的扑克
			// 判断当前拖动的扑克的值不等于1则停止运行 return
			if(thisI != 13) {
				console.log("只可放入K");
				return;
			}
		} else {
			var thisItem = this.children[this.children.length - 1];
			var itemI = parseInt(thisItem.dataset.i);
			var itemFlower = parseInt(thisItem.dataset.flower);
			if(thisFlower % 2 == itemFlower % 2 || itemI - thisI != 1) {
				console.log("只能放置不同的花色，并且值执行相差1")
				return;
			}
		}
		console.log("拖动释放");
		this.appendChild(thisPoker)
		for(let i = 0, len = thisList.length; i < len; i++) {
			// 移除之前添加的样式
			this.appendChild(thisList[i]);
		}
		for(var i of this.children) {
			i.removeAttribute("style");
		}
		thisList = [];
		addDrag();
		addMarginTop();
		changeClass();
		// pakerListNum--;
	}
}